<template>
  <div class="footer fixed flex aic bg-fff">
    <div role="button" class="fot_but fdc jc-c aic f10">
      <i class="img f32 icon iconfont icon-pinglun"></i>
      客服
    </div>
    <div role="button" class="fot_but fdc jc-c aic f10">
      <i class="img f32 icon iconfont icon-aixin"></i>
      收藏
    </div>
    <div role="button" class="fot_but fdc jc-c aic f10" @click="toCart">
      <van-icon class="f18" name="chat-o" :badge="cartNum" v-if="isLogin" />
      <van-icon class="f18 mb-3" name="chat-o" v-else />

      <!-- <i class="img f32 icon iconfont icon-shouye"></i> -->
      购物车
    </div>
    <div class="fg1"></div>
    <div class="flex bsbx" style="height: 40px; width: 216px">
      <button class="fot_but1 ml-5 fff w100" @click="showPopup">
        <div class="flex aic jc-c w100">
          <span class="f14">加入购物车</span>
        </div>
      </button>
      <button class="fot_but2 fff mr-5 w100" @click="purchase">
        <div class="flex aic jc-c w100">
          <span class="f14">立即购买</span>
        </div>
      </button>
    </div>
    <van-popup v-model="show" round>
      <div class="pop">
        <p class="f16 w700 mt-30">温馨提示</p>
        <p class="mt-25 hui">你还没登录，请先登录</p>
        <div class="button flex jc-sa aic">
          <span class="f20 w100" @click="show = false">取消</span>
          <span class="f20 btn3 w100" @click="$router.push('/login')"
            >确认</span
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  props: ["cartNum", "productId", "isLogin"],
  methods: {
    toCart() {
      this.$router.push("/cart");
    },

    showPopup() {
      if (this.isLogin) {
        this.$emit("addGood");
      } else {
        this.show = true;
      }
    },
    purchase() {
      this.$emit("purchase");
    },
  },
};
</script>

<style scoped>
.pop {
  width: 250px;
  height: 130px;
  text-align: center;
}
.pop .w700 {
  position: relative;
  font-weight: 700;
}
.pop .hui {
  color: #939393;
  font-size: 14px;
}
.pop .button {
  width: 100%;
  position: absolute;
  bottom: 10px;
}
.pop .button .btn3 {
  /* width: 125px; */
  color: #377fd8;
}
</style>